<template>
	<router-view></router-view>
	<el-main>
		<el-row :gutter="15">
			<el-col v-for="item in list" :key="item.title" :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }" @click="click(item.url)">
					<div class="code-item">
						<div class="img" :style="{ background: item.color }">
							<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`"
								><component :is="item.icon"
							/></el-icon>
						</div>
						<div class="title">
							<h2>{{ item.title }}</h2>
							<h4>{{ item.des }}</h4>
							<p>
								<el-tag>{{ item.ver }}</el-tag>
							</p>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
export default {
	name: 'autocode',
	data() {
		return {
			list: [
				{
					title: 'CRUD v2',
					des: '配置型生成经典的增删改查列表',
					icon: 'el-icon-finished',
					color: '#ccc',
					ver: '开发中',
					url: '/test/autocode/list_n'
				},
				{
					title: 'FormDesigner',
					des: '表单设计器',
					icon: 'el-icon-list',
					color: '#ccc',
					ver: '开发中',
					url: '/vform'
				}
			]
		}
	},
	methods: {
		click(url) {
			this.$router.push({
				path: url
			})
		}
	}
}
</script>

<style scoped>
.el-card {
	margin-bottom: 15px;
}
.code-item {
	cursor: pointer;
}
.code-item .img {
	width: 100%;
	height: 150px;
	background: #09f;
	display: flex;
	align-items: center;
	justify-content: center;
}
.code-item .img i {
	font-size: 100px;
	color: #fff;
	background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
	-webkit-text-fill-color: transparent;
}
.code-item .title {
	padding: 15px;
}
.code-item .title h2 {
	font-size: 16px;
}
.code-item .title h4 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-top: 5px;
}
.code-item .title p {
	margin-top: 15px;
}
</style>
